<template>
  <div class="user-management">
    <h1>用户管理</h1>
    <table  class="user-table">
      <thead>
        <tr>
          <th>ID</th><th>姓名</th><th>邮箱</th><th>年龄</th><th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.age }}</td>
          <td>
            <button class="btn edit" @click="editUser(user)">编辑</button>
            <button class="btn delete" @click="deleteUser(user.id)">删除</button>
            <!-- <button class="btn detail" @click="viewDetails(user.id)">查看详情</button> -->
            <router-link :to="`/user/${user.id}`" class="btn detail">查看详情</router-link>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="form-container">
        <h2>{{ isEditing ? '编辑用户' : '添加用户' }}</h2>
        <form @submit.prevent="isEditing ? updateUser() : createUser()">
        <input v-model="formData.name" placeholder="姓名" required />
        <input v-model="formData.email" placeholder="邮箱" required />
        <input v-model.number="formData.age" placeholder="年龄" type="number" />
        <button type="submit"  class="btn submit">{{ isEditing ? '更新' : '创建' }}</button>
        </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      formData: { name: '', email: '', age: null },
      isEditing: false,
      editId: null
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      const res = await axios.get('http://localhost:8081/api/users');
      this.users = res.data;
    },
    async createUser() {
      await axios.post('http://localhost:8081/api/users', this.formData);
      this.formData = { name: '', email: '', age: null };
      this.fetchUsers();
    },
    editUser(user) {
      this.isEditing = true;
      this.editId = user.id;
      this.formData = { ...user };
    },
    async updateUser() {
      await axios.put(`http://localhost:8081/api/users/${this.editId}`, this.formData);
      this.formData = { name: '', email: '', age: null };
      this.isEditing = false;
      this.fetchUsers();
    },
    async deleteUser(id) {
      await axios.delete(`http://localhost:8081/api/users/${id}`);
      this.fetchUsers();
    },
    viewDetails(userId) {
        this.$router.push(`/user/${userId}`);
    }
  }
};
</script>

<style scoped>.user-management {
  max-width: 1000px;
  margin: auto;
  padding: 2rem;
  font-family: Arial, sans-serif;
}

h1, h2 {
  text-align: center;
  color: #333;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-table thead {
  background-color: #f5f5f5;
}

.user-table th,
.user-table td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.user-table tr:hover {
  background-color: #fafafa;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 4px;
  font-weight: bold;
}

.edit {
  background-color: #4caf50;
  color: white;
}

.delete {
  background-color: #f44336;
  color: white;
}

.detail {
  background-color: #58adf3;
  color: white;
}

.form-container {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

input {
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.submit {
  background-color: #2196f3;
  color: white;
}
</style>
